<!-- 下载记录页面 -->
<template>
  <div>
    <n-data-table
      :single-line="false"
      :columns="columns"
      :data="data"
      :row-key="rowKey"
      @update:checked-row-keys="handleCheck"
    />
  </div>
</template>

<script setup>
import { NDataTable, NButton, NTag } from "naive-ui";
import { ref, h } from "vue";
useHead({ title: "下载管理" });

const state = reactive({
  columns: [
    {
      type: "selection",
      align: "center",
    },
    {
      title: "操作",
      key: "tags",
      align: "center",
      width: "180px",
      render(row) {
        const tags = row.tags.map((tagKey) => {
          return h(
            NTag,
            {
              style: {
                marginRight: "20px",
                background: "none",
                cursor: "pointer",
              },
              type: "warning",
              bordered: false,
              onClick: () => handleLook(row, tagKey),
            },
            {
              default: () => tagKey,
            }
          );
        });
        return tags;
      },
    },
    {
      title: "素材名称",
      key: "age",
      align: "center",
    },
    {
      title: "下载时间",
      key: "address",
      align: "center",
    },
    {
      title: "下载人员",
      key: "time",
      align: "center",
    },
  ],
  data: [
    {
      key: 0,
      tags: ["查看", "版权证书"],
      age: 32,
      address: "111",
      time: "2022-09-07",
    },
    {
      key: 1,
      tags: ["查看", "版权证书"],
      age: 42,
      address: "222",
      time: "2022-09-08",
    },
    {
      key: 2,
      tags: ["查看", "版权证书"],
      age: 32,
      address: "333",
      time: "2022-09-09",
    },
    {
      key: 3,
      tags: ["查看", "版权证书"],
      age: 32,
      address: "333",
      time: "2022-09-09",
    },
    {
      key: 4,
      tags: ["查看", "版权证书"],
      age: 32,
      address: "333",
      time: "2022-09-09",
    },
  ],
});

const { columns, data } = toRefs(state);

// 查看按钮
function handleLook(row, tagKey) {
  if (tagKey === "查看") {
    console.log("这是查看", 11111);
  } else {
    console.log("这是版权证书", 222222);
  }
}

const checkedRowKeysRef = ref([]);
const rowKey = (row) => row.key;

const handleCheck = (rowKeys) => {
  console.log(rowKeys);
  checkedRowKeysRef.value = rowKeys;
};
</script>
